<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-07-04 15:13:59
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 13:51:33
 * @FilePath: /amap/src/views/control/control-vr/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="vc-vr-zuji-control" :style="positionStyle">
    <div class="vc-button" @click="onOpen">
      <img src="@/assets/images/home/ic_home_vr.png" class="image" />
      <span>我的足迹</span>
    </div>
  </div>
  <control-drawer ref="drawerRef" title="我的足迹">
    <template #header>
      <div class="title-view">
        <div class="left">
          <h4>我的足迹</h4>
          <span>共:{{ myVrList.length }}条</span>
        </div>
        <div @click="openMyZuji" class="title-zuji">足迹地图</div>
      </div>
    </template>
    <vc-vr-zuji-list :list="myVrList" @tap="addMarker" />
  </control-drawer>

  <vc-collection-billboard :billboards="billboards" @click="onClickBillboard"></vc-collection-billboard>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { positionProps, usePosition } from "../composables/usePosition";
// import {useVueCesium}  from "../../../../../node_modules/vue-cesium/lib/composables";
// import { useVueCesium } from "vue-cesium";
import * as Cesium from "cesium";
// const vueCesium = useVueCesium();

import { useCustomCesium } from "../useCustomCesium";
const {vueCesium} = useCustomCesium();


const props = defineProps({
  ...positionProps,
});
const { positionStyle } = usePosition(props);
import ControlDrawer from "../control-drawer.vue";
import VcVrZujiList from "./vc-vr-zuji-list.vue";
import type { ZFMyVrModel } from "../type";
import { createComponent } from "@/components/createComponent";
import { getMy360ImagesAll } from "@/api/vr";
import VcVrZujiCloseButton from "./vc-vr-zuji-close-button.vue";
import VcWebUrlDialog from "../vc-dialog/vc-web-url-dialog.vue";

const myVrList = ref<ZFMyVrModel[]>([]);
const drawerRef = ref();
const billboards = ref<any[]>([]);
//   import {useAccountStore} from '@/stores'
//   import { ElMessage } from "element-plus";
//   const accountStore = useAccountStore()
import {useVisiable} from './useVisiable'
const {visible} = useVisiable();
const loadData = async () => {
  var res = (await getMy360ImagesAll()) as any;
  console.log("--getMyVrList-----", res);
  if (res.code == 200) {
    myVrList.value = res.data as ZFMyVrModel[];
  }
};

const onOpen = () => {
  // if (!accountStore.isLogin) {
  //   ElMessage("请先登录");
  //   return;
  // }

  // Cesium.GeoJsonDataSource.load('../../../../assets/qu.json', {
  //   stroke: Cesium.Color.RED,
  //   fill: Cesium.Color.PINK.withAlpha(0.5),
  //   strokeWidth: 3,
  // }).then((data) => {
  //   console.log("json-data---", data);
  //   vueCesium.viewer.dataSources.add(data);
  // }).catch((error)  => {
  //   console.log('json-error---', error)
  // })

  loadData();
  drawerRef.value.open();
};
const openMyZuji = () => {
  console.log("openMyZuji", vueCesium.viewer._container);
  visible(vueCesium.viewer,false);

  const { close } = createComponent(VcVrZujiCloseButton, {
    onTap: (payload: any) => {
      console.log("onTap", payload);
      visible(vueCesium.viewer,true);
      billboards.value = [];
      close();
    },
  });

  myVrList.value.forEach((data: ZFMyVrModel) => {
    const billboard = {} as any;
    billboard.position = Cesium.Cartesian3.fromDegrees(data.gt_id, data.lt_id);
    // billboard.image = Cesium.writeTextToCanvas((i + 1).toString(), {
    //   font: "100px sans-serif",
    //   strokeWidth: 2,
    // }).toDataURL();
    billboard.image = "https://zouyaoji.top/vue-cesium/images/grepin.png"
    // billboard.image = "https://zouyaoji.top/vue-cesium/favicon.png",// "https://sandcastle.cesium.com/images/facility.gif";
    billboard.scale = 0.25;
    billboard.id = data.id;
    billboard.data = data;
    billboard.scaleByDistance = new Cesium.NearFarScalar(1.5e2, 1.2, 8.0e6, 0.5),
    billboards.value.push(billboard);
  });
};

// const visible = (visible: boolean) => {
//   let element = vueCesium.viewer._container as HTMLElement;
//   console.log("----", element.children);
//   for (let index = 0; index < element.children.length; index++) {
//     const element1 = element.children[index];
//     if (
//       element1.className.includes("cesium") ||
//       element1.className.includes("el-menu") ||
//       element1.className.includes("vc-layer-imagery")
//     ) {
//       continue;
//     }
//     (element1 as HTMLElement).style.display = visible ? "block" : "none";
//   }
// };

const onClickBillboard = (e: any) => {
  console.log("onClickBillboard", e.pickedFeature.primitive);
  if (e.pickedFeature.primitive != null) {
    onClickItem(e.pickedFeature.primitive.data);
  }
}


const addMarker = (item: ZFMyVrModel) => {
  vueCesium.viewer.camera.flyTo({
     destination : Cesium.Cartesian3.fromDegrees(item.gt_id, item.lt_id, 5000.0)
  })
  if (vueCesium.viewer.entities.getById("markerId") != null) {
    vueCesium.viewer.entities.removeById("markerId");
  }
  vueCesium.viewer.entities.add({
    id: "markerId",
    position: Cesium.Cartesian3.fromDegrees(item.gt_id, item.lt_id),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
    },
  })
  
  onClickItem(item);
};
const onClickItem = (item: ZFMyVrModel) => {
  const { close } = createComponent(VcWebUrlDialog, {
    name: item.name,
    url: item.h5_url,
    onTap: () => {
      close();
    },
  });
};
</script>

<style scoped lang="scss">
.vc-vr-zuji-control {
  position: absolute;
  z-index: 100;
  .vc-button {
    width: 50px;
  }
}
.title-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    flex-direction: row;
    justify-items: left;
    align-items: end;
    h4 {
      font-size: 16px;
      font-weight: bold;
    }
    span {
      margin-left: 10px;
      font-size: 10px;
    }
  }
}
.title-zuji {
  font-size: 10px;
  color: var(--el-color-primary);
}
</style>
